<script lang="ts" setup>
import { onMounted, ref} from 'vue'
import type { TabsPaneContext } from 'element-plus'
import { ElTabs, ElTabPane } from "element-plus";
//组件
import Header from '@/views/content/util/header.vue'
import Limit from '@/views/content/util/limit.vue'
import ConventionSetting from "@/views/content/components/inStore/conventionSetting.vue";


const activeName = ref('conventionSetting')
const handleClick = (tab: TabsPaneContext, event: Event) => {
  console.log(tab, event)
}
</script>


<template>
    <div>
        <Header title="店内设置"></Header>
      <el-tabs v-model="activeName" @tab-click="handleClick" type="card">
        <el-tab-pane label="常规设置" name="conventionSetting">
        <convention-setting style="margin-left: 40px;"></convention-setting>
        </el-tab-pane>

        <el-tab-pane label="其他设置" name="tableType">

        </el-tab-pane>
      </el-tabs>
    </div>
</template>

<style lang="scss" scoped>
/**选中 */
::v-deep .el-tabs__item.is-active {
  color: red;
  opacity: 1;
}

/**悬浮 */
::v-deep .el-tabs__item:hover {
  color: red;
  cursor: pointer;
  opacity: 1;
}


/*去下划线 */
::v-deep .el-tabs__nav-wrap::after {
  position: static !important;
}

/* 下划线颜色 */
::v-deep .el-tabs__active-bar {
  background-color: red;
}

</style>